<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			ul{margin: 0px; padding: 0px; list-style: none;}
			a{text-decoration: none;}
			
			.pro_rating{
				/*测*/
				width: 300px;
				height: 80px;
				border: 1px solid #000;
			}
				.rating{width: 80px;height: 16px; background-image: url(images/star-matrix.gif); position: relative;}
					.nostar{background-position: 0 0;}
					.onestar{background-position: 0 -16px;}
					.twostar{background-position: 0 -32px;}
					.threestar{background-position: 0 -48px;}
					.fourstar{background-position: 0 -64px;}
					.fivestar{background-position: 0 -80px;}
					
				.rating li{float: left;}
				
				.rating li a{display: block; width: 16px; height: 16px; text-indent: -99cm;z-index: 999;position: absolute;}
					.rating li.one a{left:0;}
					.rating li.two a{left:16px;}
					.rating li.three a{left:32px;}
					.rating li.four a{left:48px;}
					.rating li.five a{left:64px;}
				
				.rating li a:hover{
					background-image: url(images/star-matrix.gif);
					width: 80px;
					height: 16px;
					left: 0;
					position: absolute;
					z-index: 888;
				}

				.rating li.one a:hover{background-position: 0px -96px;}
				.rating li.two a:hover{background-position: 0px -112px;}
				.rating li.three a:hover{background-position: 0px -128px;}
				.rating li.four a:hover{background-position: 0px -144px;}
				.rating li.five a:hover{background-position: 0px -160px;}
				
				
		</style>
	</head>
	<body>
		<div class="pro_rating">
			给商品评分：
			<ul class="rating nostar">
				<li class="one"><a href="#" title="1分">1</a></li>
				<li class="two"><a href="#" title="2分">2</a></li>
				<li class="three"><a href="#" title="3分">3</a></li>
				<li class="four"><a href="#" title="4分">4</a></li>
				<li class="five"><a href="#" title="5分">5</a></li>
			</ul>
		</div>
	</body>
</html>
